<template>
  <div focusable="true" requestFocus="true" :id="comId">
    <slot></slot>
  </div>
</template>
<script>
import Vue from "vue";
import { getUUid } from "@/hippy-focus/path/utils";
export default {
  name: "focus-frame",
  provide() {
    return {
      focusFrameState: this.state,
      focusFrameMethods: {
        switchChange: this.switchChange,
      },
    }
  },
  data() {
    return {
      comId: getUUid(),
      state: {
        focusId: null,
      },
    };
  },
  beforeCreate() {
    this.$switch = {};
  },
  created() {

  },
  mounted() {
    this.onEvent();
  },
  computed: {

  },
  beforeDestroy() {
    this.offEvent();
  },
  methods: {
    switchChange(options) {
      if (!this.state.focusId) this.state.focusId = options.id;
      if (options.isdelete) { delete this.$switch[options.id]; }
      else { this.$switch[options.id] = options; }
    },
    // 绑定事件
    onEvent() {
      this.app.$on("nativeOnKeyDown", this.handleKeyDown);
    },
    // 绑定事件
    offEvent() {
      this.app.$off("nativeOnKeyDown", this.handleKeyDown);
    },
    handleKeyDown(ev) {
      // const { keyCode } = ev;
      // const { KEYCODE } = utils;
      const _switch = this.$switch[this.state.focusId || ""];
      if (_switch && _switch.$context.onKeyDown) {
        _switch.$context.onKeyDown(ev);
      }
    }
  },
  watch: {

  },
};
</script>